<template>
  <div class="line1">
    <div id="line1" style="width: 90%; height: 450px"></div>
  </div>
</template>

<script>
// es6   echarts  4.x
// import echarts from "echarts/lib/echarts";
// import "echarts/lib/chart/pie";
// import "echarts/lib/chart/bar";
// import "echarts/lib/chart/line";
// import "echarts/lib/component/title";
// import "echarts/lib/component/legend";
// import "echarts/lib/component/toolbox";
// import "echarts/lib/component/markPoint";
// import "echarts/lib/component/tooltip";

// require()   nodejs  commomjs规范
import dtime from "time-formater";
var echarts = require("echarts/lib/echarts");
import axios from "axios";
require("echarts/lib/chart/pie");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/markPoint");
require("echarts/lib/component/tooltip");

export default {
  name: "echart",
  data() {
    return {
      severDay: [],
    //   [
    //     "2021-12-05",
    //     "2021-12-06",
    //     "2021-12-07",
    //     "2021-12-08",
    //     "2021-12-09",
    //     "2021-12-10",
    //     "2021-12-11",
    //   ],
      apiArr:[[0, 100, 50, 150, 200, 175, 150],[50, 150, 100, 50, 150, 100, 150],[100, 50, 200, 150, 100, 175, 50]]
    //   apiArr:[[],[],[]]
    };
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("line1"));
   
    // 一天=86400000毫秒
    for (let i = 13; i > -1; i--) {
        const date = dtime(new Date().getTime() - 86400000*i).format('YYYY-MM-DD')
        this.severDay.push(date)     
    }
    // console.log(this.data1) 
    this.getData();
    this.getSevenData()
  },
  watch:{
    apiArr:function(){
        this.getData()
    }
  },
  methods: {
    getSevenData(){
        let apiArr = [[],[],[]];
        this.severDay.forEach( item =>{
            // console.log(item)
            axios.get(`http://elm.cangdu.org/statis/user/${item}/count`)
            .then(res=>{
                // console.log(res.data.count)
                apiArr[0].push(res.data.count)
                
            })
            axios.get(`http://elm.cangdu.org/statis/order/${item}/count`)
            .then(res=>{
                // console.log(res.data.count)
                apiArr[1].push(res.data.count)
                
            })
            axios.get(`http://elm.cangdu.org/statis/admin/${item}/count`)
            .then(res=>{
                // console.log(res.data.count)
                apiArr[2].push(res.data.count)
                
            })  
        })
        //  console.log(apiArr)
         this.apiArr = apiArr;
    },
    getData() {
      const colors = ["#5793f3", "#675bba", "#d14a61"];
      const option = {
        color: colors,
        title: {
          text: "走势图",
          subtext: "星期走势图",
        },
        tooltip: {
          trigger: "axis",
          //   axisPointer: {
          //     type: "cross",
          //     label: {
          //       backgroundColor: "#6a7985",
          //     },
          //   },
        },
        legend: {
          data: ["新注册用户", "新增订单", "新增管理员"],
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
            dataView: { readyOnly: true },
            dataZoom: {
              yAxisIndex: "none",
            },
            magicType: {
              type: ["line", "bar", "pie"],
            },
            restore: {},
          },
        },
        // 直角坐标系 grid 中的 x 轴
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.severDay,
          },
        ],
        // 直角坐标系 grid 中的 y 轴
        yAxis: [
          {
            type: "value",
            name: "用户",
            min: 0,
            max: 200,
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "订单",
            min: 0,
            max: 200,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "新注册用户",
            type: "line",
            // data: [0, 100, 50, 150, 200, 175, 150],
            data: this.apiArr[0],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增订单",
            type: "line",
            // data: [50, 150, 100, 150, 200, 100, 150],
            data: this.apiArr[1],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
          {
            name: "新增管理员",
            type: "line",
            // data: [100, 50, 200, 150, 100, 175, 50],
            data: this.apiArr[2],
            yAxisIndex: 1,
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
        ],
      };
      this.myChart.setOption(option);
      //   window.addEventListener('resize',()=>{
      //       this.myChart.resize()
      //   })
      let _this = this;
      window.onresize = function () {
        _this.myChart.resize();
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.line1 {
  padding-top: 100px;
  display: flex;
  justify-content: center;
  background-color: white;
}
</style>